<template>
    <!-- 搜索栏 -->
    <!-- <div class="w-full">
        <el-form :inline="true" :model="formInline" class="w-full h-10">
            <el-form-item label="医生姓名">
                <el-input v-model="formInline.doctorName" placeholder="医生姓名" clearable class="w-40"/>
            </el-form-item>
            <el-form-item label="开始日期">
                <el-date-picker
                    v-model="formInline.data"
                    type="daterange"
                    range-separator="To"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    :size="size"
                />
            </el-form-item>
            <el-form-item label="时间">
                <el-select
                    v-model="formInline.timeId"
                    placeholder="选择时间"
                    clearable
                    class="w-60"
                >
                    <el-option
                        v-for="item in formInline.timeX"
                        :key="item.id"
                        :value="item.time"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSearch">搜索</el-button>
            </el-form-item>
        </el-form>
    </div> -->
    <!-- 表格显示 -->
    <el-table :data="tableData" style="width: 100%" border height="60vh" highlight-current-row @row-dblclick="getInfo">
        <el-table-column prop="visitId" label="序号" width="80" align="center"></el-table-column>
        <el-table-column prop="doctorName" label="医生姓名"  align="center"></el-table-column>
        <el-table-column prop="description" label="描述"  align="center"></el-table-column>
        <el-table-column prop="diagnosis" label="医生诊断"  align="center"></el-table-column>
        <el-table-column prop="method" label="处理方式"  align="center"></el-table-column>
        <el-table-column prop="doctorDescribe" label="医生建议"  align="center"></el-table-column>
        <el-table-column prop="createTime" label="时间"  align="center"></el-table-column>
        <el-table-column prop="advice" label="医嘱"  align="center"></el-table-column>
        <el-table-column label="操作"  align="center">
            <template #default="scope">
                <el-button type="primary" @click="getInfo(scope.row)">查看详情</el-button>
            </template>
        </el-table-column>
    </el-table>
    <!-- <div class="flex justify-center items-end w-full h-16 mt-2">
        <el-pagination
            v-model:current-page="pageForm.currentPage"
            v-model:page-size="pageForm.pageSize"
            :page-sizes="[10, 20, 30, 40]"
            :background="background"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pageForm.total"
            />
            <el-switch v-model="background" class="ml-2" />
    </div> -->
    <!-- 弹出对话框查看详情 -->
    <el-dialog v-model="dialogVisible" title="详情查看" width="400" :before-close="handleClose">
        <el-form :model="visitInfo" label-width="auto" class="w-full">
            <el-form-item label="医生姓名">
                <el-text class="w-40">{{ visitInfo.doctorName }}</el-text>
            </el-form-item>
            <el-form-item label="描述">
                <el-text class="w-40">{{ visitInfo.description }}</el-text>
            </el-form-item>
            <el-form-item label="医生诊断">
                <el-text class="w-40">{{ visitInfo.diagnosis }}</el-text>
            </el-form-item>
            <el-form-item label="处理方式">
                <el-text class="w-40">{{ visitInfo.method }}</el-text>
            </el-form-item>
            <el-form-item label="医生建议">
                <el-text class="w-40">{{ visitInfo.doctorDescribe }}</el-text>
            </el-form-item>
            <el-form-item label="医嘱">
                <el-text class="w-40">{{ visitInfo.advice }}</el-text>
            </el-form-item>
            <el-form-item label="时间">
                <el-text class="w-40">{{ visitInfo.time }}</el-text>
            </el-form-item>
            <!-- 药品 -->
            <el-form-item label="药品">
                <el-table :data="visitInfo.drug" style="width: 100%" border height="20vh" highlight-current-row>
                    <el-table-column prop="drugId" label="序号" width="80" align="center"></el-table-column>
                    <el-table-column prop="drugName" label="药品名"  align="center"></el-table-column>
                    <el-table-column prop="drugNumber" label="数量"  align="center"></el-table-column>
                </el-table>     
            </el-form-item>
            <!-- 项目 -->
            <el-form-item label="项目">
                <el-table :data="visitInfo.project" style="width: 100%" border height="20vh" highlight-current-row>
                    <el-table-column prop="departmentId" label="序号" width="80" align="center"></el-table-column>
                    <el-table-column prop="projectName" label="项目名"  align="center"></el-table-column>
                </el-table>   
            </el-form-item>
            <!-- 是否住院 -->
            <el-form-item label="是否住院">
                <el-tag v-if="visitInfo.inHospital" type="primary">是</el-tag>
                <el-tag v-else type="success">否</el-tag>
            </el-form-item>
            
            <el-form-item>
                <el-button type="primary" @click="handleClose">
                    确定
                </el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</template>

<script setup>
import { computed, ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { getList } from '@/api/patient/visitrecord.js'
// 表格数据
let tableData = ref([])
// 对话框可见
const dialogVisible = ref(false)
// // 北京
// const background = ref(false)
// // 最后一页面
// const pageForm = ref({
//     currentPage: 1,
//     pageSize: 10,
//     total: 50
// })
// const formInline = reactive({
//   doctorName: "",
//   timeX: [
//     {id: 1, time: '8:00 - 9:00'},
//     {id: 2, time: '9:00 - 10:00'},
//   ],
//   timeId: "",
//     date:""
// })
// const pageSearch = computed(() => {
//   return {
//     currentPage: pageForm.value.currentPage,
//     pageSize: pageForm.value.pageSize,
//     doctorName: formInline.doctorName,
//     timeId: formInline.timeId,
//     date: formInline.date,
//   }
// })
// 预约表单
const visitInfo = reactive({
  doctorName: "",
  description: "",
  diagnosis: "",
  method: "",
  doctorDescribe: "",
  advice: "",
  time: "",
  drug: [],
  project: [],
  inHospital: 0
})

initData()
// 初始化方法
function initData(){
    getList().then(res =>{
        console.log(res)
        // 初始化表格数据
        tableData.value = res.data
        // console.log(tableData)
    })
}


// // 搜搜
// const onSearch = () => {
// //   console.log(pageSearch)
//     initData()
// }
// 双击查看详情
const getInfo = (row) => {
  console.log(row)
  visitInfo.doctorName = row.doctorName
  visitInfo.description = row.description
  visitInfo.diagnosis = row.diagnosis
  visitInfo.method = row.method
  visitInfo.doctorDescribe = row.doctorDescribe
  visitInfo.advice = row.advice
  visitInfo.time = row.createTime
  // 调用方法进行获取
  visitInfo.drug = row.durgList
  visitInfo.project = row.projectList
  visitInfo.inHospital = 0
  dialogVisible.value = true
}

const handleClose = () => {
    dialogVisible.value = false
    ElMessage({
        type: 'success',
        message: "已关闭",
    })
}
</script>

<style scoped>

</style>